<template>
    <a-modal :title="form.id ? '编辑' : '添加'" style="width: 950px" :open="visibleFlag" @cancel="onClose" :maskClosable="false" :destroyOnClose="true">
      <a-form ref="formRef" :model="form" :rules="rules" :label-col="{ span: 5 }">
        <a-row>
          <a-col :span="12">
            <a-form-item label="分类" name="categoryId" required>
              <a-select style="width: 80%" v-model:value="form.categoryId" placeholder="分类" @change="referenceChange(form.categoryId)">
                <a-select-option v-for="item in dictValueList" :key="item" :value="item.categoryId">{{ item.categoryName }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="物料" name="materialId">
              <!-- <a-input-number style="width: 80%" v-model:value="form.materialId" placeholder="物料"/> -->
              <a-select style="width: 80%" v-model:value="form.materialId" placeholder="物料" @change="material">
                <a-select-option v-for="item in wuliaoValueList" :key="item" :value="item.id">{{ item.materialName }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <!-- <a-col :span="12">                     subcontractorInfoId   supplierCustomerId
            <a-form-item label="项目名称" name="projectId">
              <a-input-number style="width: 80%" v-model:value="form.projectId" placeholder="项目名称"/>
            </a-form-item>
          </a-col> -->
          <!-- <a-col :span="12">
            <a-form-item label="合同价" name="contractPrice">
              <a-input-number style="width: 80%" v-model:value="form.contractPrice" placeholder="合同价" />
            </a-form-item>
          </a-col> -->
          <a-col :span="12">
            <a-form-item label="成本价" name="purchasePrice">
              <a-input-number style="width: 80%" v-model:value="form.purchasePrice" placeholder="成本价" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="数量" name="quantity">
              <a-input-number style="width: 80%" v-model:value="form.quantity" placeholder="数量" />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
  
      <template #footer>
        <a-space>
          <a-button @click="onClose">取消</a-button>
          <a-button type="primary" @click="onSubmit">保存</a-button>
        </a-space>
      </template>
    </a-modal>
  </template>
  <script setup>
    import { reactive, ref, nextTick } from 'vue';
    
import { useRouter, useRoute } from 'vue-router'
const route = useRoute()
    import _ from 'lodash';
    import { message } from 'ant-design-vue';
    import { SmartLoading } from '/@/components/framework/smart-loading';
    import { projectMaterialApi } from '/@/api/business/project-material/project-material-api';
    import { smartSentry } from '/@/lib/smart-sentry';
    // ------------------------ 事件 -----------------------
    const emits = defineEmits(['reloadList']);
    // ------------------------ 显示与隐藏 ------------------
    // 是否显示
    const visibleFlag = ref(false);
  
    function show(rowData) {
    
      queryDict2();
      Object.assign(form, formDefault);
        if (rowData && !_.isEmpty(rowData)) {
            Object.assign(form, rowData);
      }
      form.materialId = Number(rowData.materialId)
      visibleFlag.value = true;
      nextTick(() => {
        formRef.value.clearValidate();
      });
    }
    function onClose() {
      Object.assign(form, formDefault);
      visibleFlag.value = false;
    }
  
    // ------------------------ 表单 ------------------------
  
    //点击分类传参
    const wuliaoValueList = ref([]);
    async function referenceChange(id) {
      // console.log(id);
      let obj = {
        categoryId: id,
      };
      let res = await projectMaterialApi.ClassificationReference(obj);
      wuliaoValueList.value = res.data;
    }
    // 分类
    const formDefault1 = reactive({
      categoryType: 2,
      // parentId:''
    });
    const dictValueList = ref([]);
    async function queryDict2() {
      let res = await projectMaterialApi.ClassificationData(formDefault1);
      dictValueList.value = res.data;
      // console.log(res);
      if (form.categoryId) {
        await referenceChange(form.categoryId)
      }
    }
    // 组件ref
    const formRef = ref();
    const formDefault = {
      id: undefined,
      materialId: undefined, //物料id
      // projectId: undefined, //项目id
      categoryId:undefined,//分类
      projectId: undefined, //项目id
      contractPrice: undefined, //合同价
      costPrice: undefined, //成本价
      purchasePrice:undefined,
      quantity: undefined, //数量
    };
  
    let form = reactive({ ...formDefault });
  
    const rules = {
      materialId: [{ required: true, message: '物料 必填' }],
      // projectId: [{ required: true, message: '项目名称 必填' }],
  };


    
  
    // 点击确定，验证表单
    async function onSubmit() {
      try {
        await formRef.value.validateFields();
        save();
      } catch (err) {
        message.error('参数验证错误，请仔细填写表单数据!');
      }
    }
  
    // 新建、编辑API
    async function save() {
      SmartLoading.show();
      console.log(route)
      try {
        form.projectId = route.query.projectId
        if (form.id) {
          await projectMaterialApi.update(form);
        } else {
          await projectMaterialApi.add(form);
        }
        message.success('操作成功');
        emits('reloadList');
        onClose();
      } catch (err) {
        smartSentry.captureError(err);
      } finally {
        SmartLoading.hide();
      }
    }
  
    defineExpose({
      show,
    });
  </script>
  